import { useState, useEffect } from 'react';
import {
    StatusBar,
    ToastAndroid, BackHandler,
    Alert, FlatList, StyleSheet,
    TouchableOpacity, Text, Button,
    View, Image, ImageBackground,
    ScrollView
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { NavigationContainer, useFocusEffect  } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './src/page/Home'
import Draft from './src/page/Draft';
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

// const Home = ({ navigation }) => {
//     const [page,setPage] = useState(1)
//     useEffect(()=>{
//         console.log('effect')
//     },[])
//     useFocusEffect(()=>{
//         console.log('useFocusEffect')
//     })
//     return <View>
//         {/* View组件没有onPress事件 */}
//         <Button
//             title='去详情'
//             onPress={() => navigation.navigate('detail', { id: "100" })}
//         />
//         <Button
//             title='页数+1'
//             onPress={() => setPage(page+1)}
//         />
//         <Text style={{fontSize: 50}}>{page}</Text>
//         <Text onPress={() => console.log(11)}>Home</Text>
//     </View>
// }
const Detail = ({ navigation, route }) => {
    // console.log(route);
    useEffect(() => {
        navigation.setOptions({
            title: 'hello',
            headerBackVisible: false,
            headerLeft: () => <AntDesign
                onPress={navigation.goBack}
                name="left"
                size={24}
                color="black"
            />,
        })
    }, [])
    return <View>
        <Text>{route.params.id}</Text>
        <Text onPress={navigation.goBack}>Detail3</Text>
    </View>
}
// const Draft = () => <Text>Draft</Text>
const Mine = () => <Text>Mine</Text>
const Setting = () => <Text>Setting</Text>
const TabBar = () => {
    return (
        <Tab.Navigator
            screenOptions={{
                headerTitleAlign: 'center'
            }}
        >
            <Tab.Screen
                name='home'
                component={Home}
                options={
                    {
                        title: '首页',
                        tabBarIcon: ({ color, size, focused }) => (
                            focused
                                ? <AntDesign
                                    name='home'
                                    color={color}
                                    size={size}
                                />
                                : <Entypo
                                    name='home'
                                    color={color}
                                    size={size}
                                />
                        )
                    }
                }
            />
            <Tab.Screen
                name='draft'
                component={Draft}
                options={
                    {
                        tabBarIcon: ({ color, size }) => (
                            <Entypo name="publish" color={color} size={size} />
                        )
                    }
                }
            />
            <Tab.Screen
                name='mine'
                component={Mine}
                options={
                    ({navigation})=>(
                        {
                            headerRight: ()=>(
                                <AntDesign
                                    onPress={()=>navigation.navigate('setting')}
                                    size={24} 
                                    name='setting' 
                                />
                            ),
                            tabBarIcon: ({ color, size }) => (
                                <AntDesign name='user' color={color} size={size} />
                            )
                        }
                    )
                }
            />
        </Tab.Navigator>
    )
}
const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerTitleAlign: 'center',
                }}
            >
                <Stack.Screen 
                    name='tab' 
                    component={TabBar}
                    options={{
                        headerShown: false
                    }}
                />
                <Stack.Screen 
                    name='detail' 
                    component={Detail}
                />
                <Stack.Screen 
                    name='setting' 
                    component={Setting}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5'
    }
});

export default App;